<template>
  <div>
    <h2><span style="width:10px;height:10px;background:blue"></span>财务管理</h2>
    <!--搜索 -->
    <MySearch/>
    <!-- 表格 -->
    <MyTable ref="mytable" :arr="arr"/>
    <!-- 分页 -->
    <MyPage  @parentbatch="parentbatch" @resetTablefun="resetTablefun" :total="total" />
    </div>
</template>

<script>
import MySearch from'./components/MySearch.vue'
import MyTable from'./components/MyTable.vue'
import MyPage from'./components/MyPage.vue'
// 引入接口
//获取对应数据
import {getFinanceApi}from'../../api/financeApi' 
export default {
  components:{
    MySearch,
    MyTable,
    MyPage
  },
  data(){
   return{
     arr:[],    //保存表格数组
     page:1,    //当前页码
     pageSize:200,   //当前页显示多少条数
     total:1000,  //总条数
    //  searchVal:'',  //搜索关键字
   }
  },
  // 发请求  基于请求统一管理  我们都写在api里
  mounted(){
    this.resetTablefun()//发送请求 

  },
  methods:{
    // 父组件搜索事件
    // parentsearchFun(){
    //   // 把输入框的值给searchVal
    //   this.searchVal=val
    //   // 刷新表格
    //   this.resetTablefun()
    // },
    resetTablefun(){
      // 发请求拿数据 保存到当前数组中
      // 调用
      // 分页 page是当前页码 pagesize当前页显示多少条数据
      // console.log();
   
      var params={  
        page:this.page,
        pageSize:this.pageSize,
        // searchVal:this.searchVal    //搜索关键字   首屏是空  筛选后是筛选之后的值  刷新表格默认是空
      }
      // console.log(params);
      getFinanceApi(params).then(res=>{
        console.log(res);
        if(res.code==200){
          this.arr=res.data
          this.total=res.total
        }
      })
    },

    //子调用父的批量删除函数
    parentbatch(){
     this.$refs.mytable.batchData()  //调用子组件中的函数
    },
  }

  // 


}
</script>

<style>

</style>